<template>
  <div class="todrawal">
    <!-- <div class="balance">账户剩余 <span>99999999.00</span> 元</div> -->
    <div class="drawal-from">
      <div class="drawal-tips">请输入提现金额</div>
      <div class="drawal-input">
        <input placeholder="0.00" type="number" v-model="value" />
      </div>
      <!-- <div class="submit" @click="showKeyboard=true">申请提现</div> -->
      <div class="submit" @click="todrawal">申请提现</div>
      <div class="agreement">
        <van-checkbox v-model="checked" class="check" icon-size="18"
          >请认真阅读并同意
          <span class="clause" @click="$router.push('/contract/pic4')"
            >《微店结算与提现需求》</span
          ><br />
        </van-checkbox>
      </div>
    </div>
    <div class="tips">
      <div class="tips-title">提现规则</div>
      <div class="tips-main">
        <div class="tips-item" v-for="(value, index) in tips" :key="index">
          {{ index + 1 }}.{{ value }}；
        </div>
      </div>
    </div>
    <!--银行信息-->
    <van-dialog
      v-model:show="show"
      title="账户信息"
      :lazy-render="false"
      :before-close="updatebank"
      show-cancel-button
    >
      <BankInfo ref="bankinfo" />
    </van-dialog>
    <!--数字键盘-->
    <van-action-sheet v-model:show="showKeyboard">
      <div class="content">
        <div class="wrapper" @click.stop>
          <van-password-input
            :value="password"
            :focused="showKeyboard"
            :error-info="errorInfo"
          />
          <van-number-keyboard
            v-model="password"
            :show="true"
            maxlength="6"
            :transition="false"
            extra-key="X"
            style="position: relative"
          />
        </div>
      </div>
    </van-action-sheet>
  </div>
</template>
<script>
import { reactive, toRefs, watch } from "vue";
import { Toast } from "vant";
import BankInfo from "@/components/profit/drawal/todrawal/bankInfo";
import { Insmember_cents } from "@/api/profit";
import { useStore } from "vuex";
export default {
  components: {
    BankInfo,
  },
  setup() {
    const data = reactive({
      tips: [
        "提现最低额度为200元，最小单位为100元",
        "提现手续费为2元一笔，将在提现时从您的提现额中扣除",
        "请您绑定和您的实名认证信息主体一致的个人银行卡",
      ],
      showKeyboard: false,
      password: "",
      errorInfo: "",
      show: false,
      value: "",
      checked: false,
      bankinfo: "",
    });
    // watch(()=>data.password, (newVal) => {
    //   if (newVal.length === 6) {
    //     Toast.loading({
    //       message: '验证中...',
    //       forbidClick: true,
    //     });
    //     setTimeout(() => {
    //       if(data.password=='123456'){
    //         Toast.success('提交成功!');
    //         data.showKeyboard=false;
    //         data.password='';
    //       }else{
    //         Toast('密码错误')
    //         data.password='';
    //       }

    //     }, 2000);

    //   } else {
    //     data.errorInfo = '';
    //   }
    // });
    const store = useStore();
    const todrawal = async () => {
      if (!data.checked) {
        Toast("请勾选协议!");
        return;
      }
      if (data.value < 200) {
        Toast("提现最小金额200元！");
        return;
      }
      if (data.value % 100) {
        Toast("提现最小单位为100元！");
        return;
      }
      try{
        await data.bankinfo.onLoad();
      data.show = true;
      }catch(err){
         console.log(err)
      }
    };
    const updatebank = async (action) => {
      if(action === "confirm"){
          try {
          await data.bankinfo.applyBank();
          let strEntity = {
            member_id: store.state.userInfo.F_UserId, //店主会员ＩＤ
            apply_price: parseInt(data.value), //提现金额
          };
          Toast.loading({
            message: "提交中...",
            forbidClick: true,
          });
          const res = await Insmember_cents({
            strEntity: JSON.stringify(strEntity),
          });
          if (!res[0]) {
            return false;
          }
          data.value = "";
          Toast.success("提交成功!");
          return true;
        } catch (err) {
          return false;
        }
      }else{
        return true;
      }
     
    };
    return { ...toRefs(data), todrawal, updatebank };
  },
};
</script>
<style lang="scss" scoped>
.todrawal {
  font-size: 1.3rem;
  .balance {
    color: #aaa;
    padding: 1rem;
    letter-spacing: 0.75px;
    span {
      color: red;
    }
  }
  .drawal-from {
    background: #fff;
    padding: 1rem 2rem;
    margin-bottom: 2rem;
    .drawal-tips {
      text-align: left;
      margin: 0.5rem 0rem 1rem;
    }
    .drawal-input {
      border-bottom: 0.5px solid #f3f3f3;
      input {
        width: 100%;
        padding: 1rem 0.5rem;
      }
    }
    .submit {
      margin: 1rem 0;
      background: #fc4253;
      padding: 1rem;
      color: #fff;
      border-radius: 0.4rem;
    }
  }
  .tips {
    background: #fff;
    padding: 1rem 2rem;
  }
  .tips-title {
    color: #fc4253;
    border-bottom: 0.5px solid #f3f3f3;
    padding-bottom: 1rem;
  }
  .tips-main {
    text-align: left;
    padding: 1rem 0 0;
  }
  .tips-item {
    padding: 0.3rem 0;
  }
  .agreement {
    font-size: 1.2rem;

    .check {
      justify-content: center;
    }
    .clause {
      color: #40a2ff;
    }
  }
}
</style>